@import url(./base.less);
@import url(./normalize);

@rootsize: 37.5rem;
html,
body {
  height: 100%;
  background-color: #e5e5e5;
}
// main start
// head start 
main {
    padding-bottom: (45/@rootsize);
    header {
        width: 100%;
        height: (194/@rootsize);
        background: url(../images/A1_01.jpg) no-repeat;
        background-size: cover;
        overflow: hidden;
        .head {
            display: flex;
            height: (36/@rootsize);
            margin-top: (21/@rootsize);
            justify-content: space-around;
            align-items: center;
            .city {
                display: flex;
                margin-left: (9/@rootsize);
                align-items: center;
                font-size: (14/@rootsize);
                color: #fff;
                i {
                    margin-left: (6/@rootsize);
                }
            }
            .search {
                position: relative;
                input {
                    width: (283/@rootsize);
                    height: (36/@rootsize);
                    padding-left: (40/@rootsize);
                    border: none;
                    border-radius: (20/@rootsize);
                    background-color: rgba(255, 255, 255, .6);
                    font-size: (14/@rootsize);
                    box-sizing: border-box;
                }
            }
        }
    }
}
// nav start
.nav_w_h {
    width: 100%;
    height: (107/@rootsize);
} 
nav {
    display: flex;
    width: 100%;
    height: (177/@rootsize);
    align-items: center;
    background-color: #fff;
    .nav {
        .nav_w_h();
        ul {
            .nav_w_h();
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            li {
                width: 20%;
                height: (53/@rootsize);
                a {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    img {
                        width: (24/@rootsize);
                        height: (25/@rootsize);
                    }
                    span {
                        margin-top: (8/@rootsize);
                        font-size: (12/@rootsize);
                        color: #232323;
                    }
                }
            }
        }
    }
}
// content tart
.contentfirst {
    width: 100%;
    height: (150/@rootsize);
    background-color: #fff;
    margin-top: (4/@rootsize);
    padding-left: (10/@rootsize);
    box-sizing: border-box;
    overflow: hidden;
    h4 {
        margin-top: (16/@rootsize);
        font-size: 14px;
        font-weight: 600;
    }
    .hot_sta {
        width: (355/@rootsize);
        height: (84/@rootsize);
        margin-top: (14/@rootsize);
        // border: 1px solid #1f1f1f;
        // border-radius: (10/@rootsize);
        ul {
            display: flex;
            justify-content: space-between;
            li {
                width: (114/@rootsize);
                height: (84/@rootsize);
                a {
                    display: block;
                    .moutain {
                        width: (114/@rootsize);
                        height: (84/@rootsize);
                        background: url(../images/A1_38.jpg) no-repeat;
                        background-size: cover;
                        border: 1px solid #fff;
                        border-radius: (10/@rootsize) 0 0 (10/@rootsize);
                    }
                    .center {
                        border-radius: 0;
                    }
                    .right {
                        border-radius: 0 (10/@rootsize) (10/@rootsize) 0;
                    }
                }
            }
        }
    }
}
// footer start 
.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: (45/@rootsize);
    background-color: #fff;
    // background: pink;
    ul {
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: (45/@rootsize);
        li {
            width: 20%;
            a {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                color: #1f1f1f;
                .fon {
                    font-size: (18/@rootsize);
                    margin-bottom: (6/@rootsize);
                }
                span {
                    font-size: (12/@rootsize);
                }
            }
        } 
        
    }
}